<template>
    <div class="test-container">
        <div class="swiper1">
            <swiper :options="swiper1.swiperOption" :not-next-tick="swiper1.notNextTick" ref="mySwiper1">
                <!-- slides -->
                <swiper-slide v-for="(item, index) of data" :key="item.id">
                    <span :class="[item.flag == 'h' ? 'zred' : '']" @click="tonews(item.id)">{{item.name}}</span>
                </swiper-slide>
                <!-- Optional controls -->
                <div class="swiper-pagination1" slot="pagination"></div>
                <div class="swiper-button-prev1" slot="button-prev"></div>
                <div class="swiper-button-next1" slot="button-next"></div>
                <div class="swiper-scrollbar1" slot="scrollbar"></div>
            </swiper>
        </div>
        <div class="swiper1 swiper2">
            <swiper :options="swiper2.swiperOption" :not-next-tick="swiper2.notNextTick" ref="mySwiper2">
                <!-- slides -->
                <swiper-slide v-for="(item, index) of data" :key="item.id">{{item.data}}</swiper-slide>

                <!-- Optional controls -->
                <div class="swiper-pagination2" slot="pagination"></div>
                <div class="swiper-button-prev2" slot="button-prev"></div>
                <div class="swiper-button-next2" slot="button-next"></div>
                <div class="swiper-scrollbar2" slot="scrollbar"></div>
            </swiper>
        </div>

    </div>
</template>

<script>
let app0 = null;
export default {
    name: "HelloWorld",
    data() {
        return {
            data: [
                {
                    id: 1,
                    name: '11',
                    flag: 'h',
                    data: '1111'
                },
                {
                    id: 2,
                    name: '22',
                    flag: '',
                    data: '2222'
                },
                {
                    id: 3,
                    name: '33',
                    flag: '',
                    data: '3333'
                },
                {
                    id: 4,
                    name: '44',
                    flag: '',
                    data: '4444'
                },
                {
                    id: 5,
                    name: '55',
                    flag: '',
                    data: '5555'
                },
                {
                    id: 6,
                    name: '66',
                    flag: '',
                    data: '6666'
                },
                {
                    id: 7,
                    name: '77',
                    flag: '',
                    data: '7777'
                },
                {
                    id: 8,
                    name: '88',
                    flag: '',
                    data: '8888'
                },
                {
                    id: 9,
                    name: '99',
                    flag: '',
                    data: '9999'
                },
                {
                    id: 10,
                    name: '10',
                    flag: '',
                    data: '1010'
                },
                {
                    id: 11,
                    name: '11',
                    flag: '',
                    data: 'a1111'
                },
                {
                    id: 12,
                    name: '12',
                    flag: '',
                    data: 'a1212'
                },
                {
                    id: 13,
                    name: '13',
                    flag: '',
                    data: 'a1313'
                },
                {
                    id: 14,
                    name: '14',
                    flag: '',
                    data: 'a1414'
                }

            ],
            swiper1: {
                notNextTick: true,
                swiperOption: {
                    // swiper options 所有的配置同swiper官方api配置
                    autoplay: false,
                    loop: false,//设置 active slide 居中后，会有左右留白现象，添加此会让未尾的导航补齐前后空白
                    slideToClickedSlide: true,//设置为true则点击slide会过渡到这个slide。
                    slidesPerView: 4,
                    centeredSlides: true,//设定为true时，active slide会居中，而不是默认状态下的居左。
                    slidesOffsetBefore: 0,
                    slidesOffsetAfter: 0,
                    freeMode: true,
                    grabCursor: true,
                    setWrapperSize: true,
                    // autoHeight: true,
                    mousewheelControl: true,
                    observeParents: true,
                    // if you need use plugins in the swiper, you can config in here like this
                    // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
                    debugger: true,
                    onTransitionStart(swiper) {
                        console.log(111);
                        console.log(swiper)
                        console.log(222);
                    }
                },
            },
            swiper2: {
                notNextTick: true,
                swiperOption: {
                    // swiper options 所有的配置同swiper官方api配置
                    autoplay: false,
                    loop: false,
                    slidesPerView: 1,
                    grabCursor: true,
                    setWrapperSize: true,
                    // autoHeight: true,
                    mousewheelControl: true,
                    observeParents: true,
                    // if you need use plugins in the swiper, you can config in here like this
                    // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
                    debugger: true,
                    onTransitionStart(swiper) {
                        // app0.swiperobj2.slideTo(swiper.activeIndex, 100, false)\

                        // app0.swiperobj2.activeIndex 为当前数组的项
                        for (let i = 0; i < app0.data.length; i++) {
                            if (app0.swiperobj2.activeIndex == i) {
                                app0.data[i]['flag'] = 'h'
                                //根据上面的点击,下面滑动
                                app0.swiperobj1.slideTo(i, 100, false)
                            } else {
                                app0.data[i]['flag'] = ''
                            }
                        }

                    }
                }
            },
            newindex: 0
        }
    },
    created() {
        app0 = this;
    },
    computed: {
        swiperobj1() {
            return this.$refs.mySwiper1.swiper
        },
        swiperobj2() {
            return this.$refs.mySwiper2.swiper
        }
    },
    methods: {
        tonews: function (id) {
            for (let i = 0; i < this.data.length; i++) {
                if (id == this.data[i].id) {
                    this.data[i]['flag'] = 'h'
                    //根据上面的点击,下面滑动
                    this.swiperobj2.slideTo(i, 100, false)
                } else {
                    this.data[i]['flag'] = ''
                }
            }

        }
    },
    mounted() {
        // you can use current swiper instance object to do something(swiper methods)
        // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
        // console.log('this is current swiper instance object', this.swiperobj1)

        // this.swiperobj1.slideTo(3, 1000, false)
        // this.swiperobj2.slideTo(this.newindex, 1000, false)
    }
};
</script>

<style lang="stylus" scoped>
.zred
    color: red
.test-contaienr
    padding: 0.2rem
    overflow: hidden
.swiper1
    height: 40px
.swiper2
    margin-top: 130px
>>>.swiper-container
    background: orange
>>>.swiper-slide
    height: 100px
    line-height: 100px
    font-size: 50px
    text-align: center
</style>